<template>
    <el-dialog title="下发考试" :visible="dialogVisible" @close="handleClose()" width="80%">
        <el-row :gutter="24">
            <el-col :span="6">
                <el-form :model="form">
                    <el-form-item label="卷名" :label-width="formLabelWidth">
                        <el-input v-model="waitPaperName" autocomplete="off" disabled></el-input>
                    </el-form-item>
                </el-form>
                <label>部门</label>
                <el-tree :data="deptTree" show-checkbox :check-strictly="true" node-key="id"
                    :props="{ label: 'label' }" @check-change="handleClick" ref="tree">
                </el-tree>
            </el-col>
            <el-col :span="12">
                <el-input placeholder="请输入内容" v-model="waitPaperName" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%; margin-top: 20px"
                    height="350" @selection-change="handleSelectionChange" border>
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column prop="nickName" label="姓名">
                    </el-table-column>
                    <el-table-column prop="phonenumber" label="手机号" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="日期" width="120">
                        <template slot-scope="scope">{{ scope.row.createTime }}</template>
                    </el-table-column>
                </el-table>
                <div>
                    <pagination :current="gather.current" :total="total" :size="gather.size" @sizeChange="sizeChange"
                        @currentChange="currentChange"></pagination>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="height: 30px; margin-top: 10px">
                    <label>已选人员:<span>{{ form.waitUserNum }}</span></label>
                </div>
                <el-scrollbar>
                    <el-table ref="multipleTable" :data="selectedTableData" tooltip-effect="dark" height="350"
                        style="width: 100%; margin-top: 20px; height: 100%" @selection-change="handleSelectionChange"
                        border>
                        <el-table-column prop="nickName" label="姓名"> </el-table-column>
                        <el-table-column fixed="right" label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="
                                    deleteRow(scope.$index, selectedTableData)
                                    " type="text" size="small">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-scrollbar>
            </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
    </el-dialog>
</template>
  
  
<script >
import { listDept } from '@/api/system/dept'
import { deptTreeSelect } from "@/api/system/user";
import { saveWaitPaper } from '@/api/onlineQuestion/index'
import { listUser } from '@/api/system/user'
export default {
    props: {
        waitPaperName: {
            type: String,
            default: "",
        },
        paperId: {
            type: Number,
            default: 0
        }
        ,
        examPaperId: {
            type: Number,
            default: 0
        }

    },
    data() {
        return {
            gather: {
                current: 1, //默认第一页
                size: 10, //一页展示10条
            },
            total: 0,
            // 部门树选项
            deptTree: [],
            defaultProps: {
                children: "children",
                label: "label",
            },
            input3: "",
            dialogVisible: false,
            formLabelWidth: "40px",
            form: {
                paperName: "",
                userIds: [],
                waitUserNum: 0,
                paperId: 0,
                examPaperId: 0
            },
            tableData: [],
            selectedTableData: [],
            multipleSelection: [],
            searchParams: {
                current: 1, //默认第一页
                size: 10, //一页展示10条
                deptId: undefined
            },

            newArr: [],
            // 查询参数
            queryParams: {
                deptId: undefined
            },
            // 部门名称
            deptName: undefined,
        };
    },
    created() {
        this.queryDept();
    },
    methods: {
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.gather.current = val;
            this.searchParams.current = val;
            this.queryUserAll(this.searchParams); //调用接口方法
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.gather.size = val;
            this.searchParams.size = val;
            this.queryUserAll(this.searchParams);
        },
        /** 查询部门下拉树结构 */
        queryDept() {
            deptTreeSelect().then(response => {
                this.deptTree = response.data;
            });
        },
        //部门人员
        queryUserAll(params) {
            console.log(params)
            listUser(params).then(res => {
                console.log(res)
                if (res.code === 200) {
                    this.tableData = res.rows;
                    this.total = res.total;
                }

            })

        },

        //显示弹窗
        show() {
            this.dialogVisible = true;
            this.queryUserAll(this.searchParams);
        },
        //提交表单
        submitForm() {
            this.getPostParams();
            saveWaitPaper(JSON.stringify(this.form)).then(res => {
                if (res.code === 200) {
                    this.handleClose();
                }
            })
        },

        //关闭弹窗
        handleClose() {
            this.dialogVisible = false;
            //清空表单
            this.newArr = [];
            this.form.waitUserNum = 0;
            this.tableData = [];
            this.form.paperName = "";
            this.$refs.tree.setCheckedKeys([]);
            this.selectedTableData = [];
            this.form.userIds = [];
        },
        // 已选名单人员点击事件
        handleSelectionChange(val) {
            // 缓存用于记录
            for (const t of val) {
                // 检查缓存中是否已经存在
                if (this.newArr.find((c) => c.userId === t.userId)) {
                    // 已经存在说明以前记录过，现在这个就是多余的，直接忽略
                    continue;
                }
                // 不存在就说明以前没遇到过，把它记录下来
                this.newArr.push(t);
            }
            this.selectedTableData = [];
            this.selectedTableData = this.newArr;
            this.form.waitUserNum = this.newArr.length;
        },
        //部门节点点击事件
        handleClick(data, checked, node) {
            if (checked) {
                this.$refs.tree.setCheckedKeys([data.id]);
                //根据部门id刷新人员列表
                this.searchParams.deptId = data.id;
                this.queryUserAll(this.searchParams);
            }
        },
        //移除已选人员
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        //获取提交的用户id
        getPostParams() {
            this.form.paperName = this.waitPaperName;
            this.form.paperId = this.paperId;
            this.form.examPaperId = this.examPaperId;
            for (let item of this.selectedTableData) {
                this.form.userIds.push(item.userId);
            }
        },
    },
};
</script>
<style scoped>
.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

/* 设置滚动条的宽度 */
.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
}

/* 设置滚动条的背景色和圆角 */
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: pink;
    border-radius: 8px;
}
</style>
  